<template>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light mb-4">
      <a class="navbar-brand" href="#"
        ><div class="logo"></div>
        <span>ToDoList</span></a
      >
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <!-- <a class="nav-link" href="#">待办事项</a> -->
            <router-link :to="{ name: 'add' }" class="nav-link"
              >待办事项
            </router-link>
          </li>
          <li class="nav-item">
            <!-- <a class="nav-link" href="#">已完成</a> -->
            <router-link :to="{ name: 'done' }" class="nav-link"
              >已完成
            </router-link>
          </li>
          <li class="nav-item">
            <!-- <a class="nav-link" href="#">已删除</a> -->
            <router-link :to="{ name: 'delete' }" class="nav-link"
              >已删除
            </router-link>
          </li>
        </ul>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Home'
})
</script>
<style lang="scss" scoped></style>
